import React from 'react'
import '../assets/css/catelist.css'
import { Link } from 'react-router-dom'
import { Tabs, Ellipsis } from 'antd-mobile'
import { getCatelist,cartadd} from '../request/app'
// 引入顶部组件
import NavTop from "../components/navtop"
import Search from "../components/search"

class Home extends React.Component {
    constructor() {
        super()
        this.state = {
            list1: require('../assets/images/底1.png'),
            catelist: []
        }
    }
    componentDidMount() {
        getCatelist({

        }).then(res => {
            console.log(res.list);
            if (res.code === 200) {
                this.setState({
                    ...this.state,
                    catelist: res.list
                })
            }
        })

    }
    addCart(id){
        cartadd({
            uid:JSON.parse(sessionStorage.getItem('userInfo')).uid,
            // uid: 'b8310bb0-e798-11ec-9135-3937bfd6e309',
            type: "1",
            goodsid: id,
            num: 1
        }
        ).then(res => {
            console.log(JSON.parse(sessionStorage.getItem('userInfo')).uid);
            console.log(res);
            if (res.code == '200') {
               console.log('加入成功');
            }

        })
        .catch(err=>{
            console.log(err);
        })
    }
    render() {
        const { catelist } = this.state
        return (

            <div className='box1'>
                <NavTop title='商品分类'></NavTop> 
                <Search></Search>

                <Tabs>
                    <Tabs.Tab title='综合推荐' key='fruits' />
                    <Tabs.Tab title='销量' key='vegetables' />
                    <Tabs.Tab title='价格' key='animals'></Tabs.Tab>
                    <Tabs.Tab title='好评度' key='a' />
                    <Tabs.Tab title='店铺' key='b' />
                    <Tabs.Tab title='筛选' key='c' />
                </Tabs>

                <div className='bottom1'>
                    {/* 双十一 */}
                    <div className='sift1'>
                        筛选11.11大促商品
                    </div>
                    {/* 商品列表 */}
                    <ul className="list1">
                        {
                            catelist.map(item => {
                                return <li key={item.id}>
                                    <div>
                                        <img className='img1' src={item.img} alt="" />
                                    </div>
                                    <div className='list_right1'>
                                        <div>
                                            <button className='time1'>限时</button>
                                            <Ellipsis direction='end' content={item.description} />
                                        </div>
                                        <Ellipsis direction='end' content={item.goodsname} />
                                        <button className='price1'>11.11限时299元起</button>
                                        <div className='nowPrice1'>
                                            ￥<span>{item.price}</span>
                                            <span><s>￥{item.market_price}</s></span>
                                        </div>
                                        <div className='pay1'>
                                            <span>999人已付款</span>
                                            <span>99.9%好评</span>
                                        </div>
                                        <button onClick={()=>this.addCart(item.id)} className='addCart1'>
                                            <Link to={`/index/cart?id=${item.id}`}>加入购物车</Link>
                                        </button>
                                    </div>
                                </li>
                            })
                        }
                    </ul>
                </div>
            </div>)
    }
}
export default Home